<template>
    <div id="contianer">

      <el-row style="padding-top: 10px">
        <el-button-group class="pull-right">
          <el-form :inline="true" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()"
            @submit.native.prevent>
            <el-form-item>
              <el-select v-model="searchForm.profession" placeholder="请选择所属专业" clearable>
                <el-option v-for="(item, index) in majorTypeList" :key="index" :label="item.name"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="searchForm.fileType" placeholder="请选择文件类型" clearable>
                <el-option v-for="(item, index) in fileTypeList" :key="index" :label="item.name"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="fileName">
              <el-input size="small" v-model.trim="searchForm.fileName" placeholder="文件名称" clearable></el-input>
            </el-form-item>
            <el-form-item prop="time">
              <el-date-picker
                v-model="time"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="changeTime"
                :default-time="['00:00:00', '23:59:59']">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="refreshList()" size="small">查询</el-button>
              <el-button @click="resetSearch()" size="small">重置</el-button>
            </el-form-item>
          </el-form>
        </el-button-group>
      </el-row>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            v-if="isAdmin"
            type="primary"
            plain
            @click="handleExportPermission"
            >导出数据权限</el-button>
        </el-col>
      </el-row>
      <el-table :data="dataList" style="width: 100%;" v-loading="loading" border size="medium" class="table" :max-height="tableClientHeight">
        <!-- <el-table-column
                  type="selection"
                  header-align="center"
                  align="center"
                  width="50"
              >
              </el-table-column> -->
        <el-table-column label="序号"  fixed="left" align="center" width="60px">
          <template slot-scope="scope">
            <span>{{ scope.$index + (pageNo - 1) * pageSize + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column  fixed="left" prop="fileName" sortable="custom" min-width="30%" label="文件名称" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span class="scopeTitle" @click="detailFn(scope.row, true)">
              {{ scope.row.fileName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column  fixed="left" prop="fileCode" show-overflow-tooltip label="文件编号" min-width="15%">
        </el-table-column>
        <el-table-column prop="fileVersion" label="文件版次" v-if="activeTab === '1'" min-width="15%">
        </el-table-column>
        <el-table-column prop="versionStatus" label="版次状态" min-width="18%" v-if="activeTab === '1'">
          <template slot-scope="scope">
            <span>{{ scope.row.versionStatus === 0 ? "废止" : "现行" }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="author" label="作者姓名" min-width="10%" v-if="activeTab === '1'">
        </el-table-column>
        <el-table-column prop="uploadUser" label="上传人员" min-width="15%">
        </el-table-column>
        <el-table-column prop="uploadTime" label="上传日期" min-width="20%">
        </el-table-column>

        <el-table-column prop="fileTypeName" show-overflow-tooltip min-width="15%" label="文件类型">
        </el-table-column>
        <el-table-column prop="professionName" min-width="12%" label="所属专业">
        </el-table-column>
        <el-table-column prop="fileFormat" label="文件格式" min-width="12%">
        </el-table-column>

        <el-table-column prop="statusName" min-width="12%" label="文件状态">
        </el-table-column>
        <el-table-column prop="approvalTypeName" min-width="12%" label="审核类型" v-if="activeTab !== '1'">
        </el-table-column>
        <el-table-column prop="analyseStatusName" min-width="13%" label="解析状态">
        </el-table-column>
        <el-table-column fixed="right" header-align="center" min-width="31%" label="操作">
          <template slot-scope="scope">
              <el-button type="text" size="small" @click="detailFn(scope.row, scope.row.fileType != 34 ? true : false)"
                >查看
              </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageNo"
        :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" style="text-align: right; margin-top: 10px"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>

      <!-- 添加或修改用户配置对话框 -->
      <el-dialog title="文件上传" :visible.sync="dialogVisible" :close-on-click-modal="false" width="600px" append-to-body>
        <el-form ref="uploadForm" :model="uploadForm" :rules="rules" label-width="80px">
          <el-form-item label="专业类型" prop="majorType">
            <el-select v-model="uploadForm.majorType" placeholder="请选择专业类型" style="width: 100%" clearable>
              <el-option v-for="(item, index) in majorTypeList" :key="index" :label="item.name"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文件类型" prop="fileType">
            <el-select v-model="uploadForm.fileType" placeholder="请选择文件类型" style="width: 100%" clearable>
              <el-option v-for="(item, index) in fileTypeList" :key="index" :label="item.name"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">下一步</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
      <!-- 驳回 -->
      <el-dialog title="驳回" :visible.sync="elementsVisible" width="30%" center :close-on-click-modal="false">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="驳回原因" prop="reason">
            <el-input maxlength="500" show-word-limit v-model.trim="ruleForm.reason" type="textarea" :rows="3"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="elementsConfirm">确 定</el-button>
          <el-button @click="elementsVisibleClose">取 消</el-button>
        </span>
      </el-dialog>
      <!-- 更新 -->
      <el-dialog title="更新" :visible.sync="updateVisible" width="30%" center :close-on-click-modal="false">
        <el-form :model="updateForm" :rules="updaterules" ref="updateForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="专业类型" prop="profession">
            <el-select v-model="updateForm.profession" placeholder="请选择专业类型" style="width: 100%" clearable>
              <el-option v-for="(item, index) in majorTypeList" :key="index" :label="item.name"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文件类型" prop="fileType">
            <el-select v-model="updateForm.fileType" placeholder="请选择文件类型" style="width: 100%" clearable>
              <el-option v-for="(item, index) in fileTypeList" :key="index" :label="item.name"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上传文件" prop="fileId">
            <el-upload :action="uploadImgUrl" class="upload-demo" :show-file-list="false"
              accept=".doc,.docx,.ppt,.pptx,.pdf,.xls,.xlsx" :on-success="uploadSuccess" drag multiple :headers="headers">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <div class="el-upload__tip" slot="tip">
                只能上传.doc,.docx,.ppt,.pptx,.pdf,.xls,.xlsx类型的文件
              </div>
            </el-upload>
          </el-form-item>

          <el-form-item label="文件名称" prop="fileName">
            <el-input maxlength="100" v-model="updateForm.fileName" placeholder="请输入文件名称"></el-input>
          </el-form-item>
          <el-form-item label="作者姓名" prop="author">
            <el-input maxlength="100" v-model="updateForm.author" placeholder="请输入作者姓名"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="updateConfirm">确 定</el-button>
          <el-button @click="updateVisibleClose">取 消</el-button>
        </span>
      </el-dialog>

      <!-- 预览 -->
      <el-dialog custom-class="previewIframe" :visible.sync="previewVisible" fullscreen center :close-on-click-modal="false" >
        <div class="header-content">
          <div class="header">
            <el-button v-if="!isSourcePreview" type="primary" @click="detailFn(detailRow, true)">解析后预览</el-button>
            <el-button v-else type="primary" @click="detailFn(detailRow, false)">源文件预览</el-button>
          </div>
          <div class="header_button">
            <img class="icon" @click="changeLike"
                :src="collectLikeForm.like==1?require('@/assets/images/heart_fill.png'):require('@/assets/images/heart.png')"/>
            <span>{{ collectLikeForm.likeNumber || '' }}</span>
            <img class="icon" @click="changeCollect"
                :src="collectLikeForm.collect == 1?require('@/assets/images/collect_yes.png'):require('@/assets/images/collect_no.png')"/>
            <span>{{ collectLikeForm.collectNumber || '' }}</span>
          </div>
        </div>
        <iframe v-loading="previewLoading" id="iframe" src="" frameborder="0" width="100%" height="100%" style="margin-top: 10px;"></iframe>
      </el-dialog>
      <!-- 预览视频 -->
      <el-dialog custom-class="previewIframe" :visible.sync="videoVideoVisible" :close-on-click-modal="false" fullscreen center>
        <div class="video_model">
          <div id="video"></div>
        </div>
      </el-dialog>
    </div>
  </template>

  <script>
  import PreviewUpload from "@/components/accessory/PreviewUploadFile"
  import ExcelView from './excelView'

  export default {
    dicts: ["sys_user_sex"],
    components: {
      PreviewUpload
    },
    data() {
      return {
        elementsVisible: false,
        updateVisible: false,
        previewVisible: false,
        previewLoading: true,
        videoVideoVisible: false,
        previewUrl: "",
        tabArray: [
          {
            label: "原文件管理",
            value: "1",
            number: 0,
            fmtNumber: 0,
          },
          {
            label: "审核任务管理",
            value: "2",
            number: 0,
            fmtNumber: 0,
          },
          {
            label: "批准任务管理",
            value: "3",
            number: 0,
            fmtNumber: 0,
          },
        ],
        activeTab: "1",
        searchForm: {
          fileName: "",
          fileType: "",
          profession: "",
          startTime: "",
          endTime: "",
        },
        time: [],
        ruleForm: {
          reason: "",
        },
        updateForm: {
          author: "",
          fileId: "",
          fileName: "",
          fileType: "",
          id: "",
          profession: "",
        },
        dataList: [],
        pageNo: 1,
        pageSize: 10,
        total: 0,
        orderBy: "",
        dataListSelections: [],
        loading: false,
        dialogVisible: false,
        isSourcePreview: false,
        detailRow: {},
        uploadForm: {
          majorType: "",
          fileType: "",
        },
        elementsVisibleId: "", // 驳回任务id
        uploadFileId: "",
        uploadImgUrl: this.$config.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
        headers: {
          token: localStorage.getItem("token"),
        },
        fileTypeList: [],
        majorTypeList: [],
        rules: {
          majorType: [
            { required: true, message: "请选择专业类型", trigger: "change" },
          ],
          fileType: [
            { required: true, message: "请选择文件类型", trigger: "change" },
          ],
        },
        updaterules: {
          profession: [
            { required: true, message: "请选择专业类型", trigger: "change" },
          ],
          fileType: [
            { required: true, message: "请选择文件类型", trigger: "change" },
          ],
          fileName: [
            { required: true, message: "请输入文件名称", trigger: "blur" },
          ],
          author: [
            { required: true, message: "请输入作者名称", trigger: "blur" },
          ],
        },
        //pdf、视频预览
        collectLikeForm: {
          like: 0,
          collect: 0,
          likeNumber: 0,
          collectNumber: 0,
          selected: false
        }
      };
    },
    computed: {
      tableClientHeight() {
        let tableClientHeight = document.documentElement.clientHeight || document.body.clientHeight
        tableClientHeight = tableClientHeight - 280
        return tableClientHeight
      },
      isAdmin() {
        return this.$store.state.user.isAdmin;
      },
    },
    activated() {
      this.refreshList();
    },
    mounted() {
      this.fileTypeListFn();
      this.majorTypeListFn();
      if (this.$route.query.fileType) {
        console.log(this.$route.query.fileType, typeof (this.$route.query.fileType))
        this.searchForm.fileType = Number(this.$route.query.fileType)
      }
      this.refreshList();
    },
    methods: {
      fileTypeListFn() {
        this.$http({
          url: "/dict/file/list",
          method: "GET",
          params: {},
        }).then(({ data }) => {
          console.log(data.data.data);
          this.fileTypeList = data.data.data;
        });
      },
      majorTypeListFn() {
        this.$http({
          url: "/dict/major/list",
          method: "GET",
          params: {},
        }).then(({ data }) => {
          console.log(data.data.data);
          this.majorTypeList = data.data.data;
        });
      },
      // 切换tab
      tabChange(d) {
        this.pageNo = 1;
        this.activeTab = d.value;
        this.refreshList();
      },
      cancel() {
        this.dialogVisible = false;
      },
      viewFn(){

      },
      submitForm() {
        console.log(this.uploadForm, "---");
        this.$refs.uploadForm.validate((valid) => {
          if (valid) {
            const path =
              [35].includes(this.uploadForm.fileType)
                ? "/knowledgeManage/originalFile/UploadVideoForm"
                : "/knowledgeManage/originalFile/UploadForm";
            this.$router.push({
              path,
              query: {
                fileType: this.uploadForm.fileType,
                profession: this.uploadForm.majorType,
              },
            });
          }
        });
      },
      // 获取数据列表
      refreshList() {
        this.loading = true;
        let url = "";
        switch (this.activeTab) {
          case "1":
            url = "/front/list";
            break;
          case "2":
            url = "/knowledgeFile/review/list";
            break;
          default:
            url = "/knowledgeFile/approve/list";
            break;
        }
        this.$http({
          url: url,
          method: "get",
          params: {
            ...this.searchForm,
            pageSize: this.pageSize,
            pageNumber: this.pageNo,
            status:1
          },
        }).then(({ data }) => {
          this.dataList = data.data.data;
          this.total = data.data.totalSize;
          this.loading = false;
        });
      },
      elementsConfirm() {
        this.elementsVisible = false;
        const url =
          this.activeTab === "2"
            ? "/knowledgeFile/review/turnDown"
            : "/knowledgeFile/approve/turnDown";
        this.$http({
          url,
          method: "post",
          data: {
            id: this.elementsVisibleId,
            reason: this.ruleForm.reason,
          },
        }).then(({ data }) => {
          if (data.code == 200) {
            this.$message.success("驳回成功");
            this.elementsVisible = false;
            this.refreshList();
          } else {
            this.$message.error("驳回失败");
          }
        });
      },
      elementsVisibleClose() {
        this.elementsVisible = false;
      },
      uploadSuccess(res, file, fileList) {
        this.$message.success('上传成功')
        this.updateForm.fileId = res.data.id;
      },
      // 更新确定
      updateConfirm() {
        this.$http({
          url: "/knowledgeFile/file/update",
          method: "post",
          data: this.updateForm,
        })
          .then(({ data }) => {
            if (data.code == 200) {
              this.$message.success("更新成功");
              this.updateVisible = false;
              this.refreshList();
            } else {
              this.$message.error("更新失败");
            }
          })
          .catch((err) => {
            this.$message.error("更新失败");
          });
      },
      // 进入详情或者预览
      detailFn(row, flag) {
        this.detailRow = row;
        this.isSourcePreview = flag;
        let that = this;
        console.log(row, "55555");
        this.$http({
          url: "/knowledgeData/addView",
          method: "post",
          data: {
            id: row.id,
          },
        }).then(({ data }) => {
          this.$set(this.collectLikeForm, 'like', data.data.like)
          this.$set(this.collectLikeForm, 'likeNumber', data.data.likeNumber)
          this.$set(this.collectLikeForm, 'collectNumber', data.data.collectNumber)
          this.$set(this.collectLikeForm, 'collect', data.data.collect)
        });
        if ([35].includes(row.fileType)) {
          this.$router.push({ path: '/knowledgeManage/originalFile/UpdateVideoForm', query: { id: row.id, isVideoGroup: true } })
          return
        }
        if (row.analyseStatus != 0) {
          this.$message.warning("文件正在解析中，不可预览")
          return
        }
        if (this.searchForm.fileType === 33) {
          this.$router.push({ path: '/excelView', query: { id: row.id} })
          return
        }
        let url = flag ? '/knowledgeData/release/preview' : '/knowledgeData/preview'
        this.$http({
          url: url,
          method: "get",
          params: {
            id: row.id,
          },
        }).then(({ data }) => {
          if (data.code == 1000) {
            this.$message.warning(data.msg);
            return;
          }
          if (row.fileType === 38) {
            this.videoVideoVisible = true;
            setTimeout(() => {
              new this.$Player({
                id: "video", // 元素id
                lang: "zh", // 设置中文
                volume: 0, // 默认静音
                autoplay: false, // 自动播放
                screenShot: false, // 开启截图功能
                height: 200,
                // 视频地址
                url:this.$config.VUE_APP_BASE_API_QA + data.data.downloadUrl,
                // 封面图
                // poster:'',
                fluid: true, // 填满屏幕 （流式布局）
                playbackRate: [0.5, 0.75, 1, 1.5, 2], // 传入倍速可选数组
              });
            }, 300)
          } else {
            this.previewVisible = true;
            setTimeout(() => {
              var iframe = document.querySelector("#iframe");
              this.populateIframe(iframe, [
                ["token", + localStorage.getItem("token")],
              ],this.$config.VUE_APP_BASE_API_QA + data.data.downloadUrl);
            }, 0);
          }
        });
      },
      populateIframe(iframe, headers, url) {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.responseType = "blob";
        headers.forEach((header) => {
          xhr.setRequestHeader(header[0], header[1]);
        });
        // xhr.setRequestHeader("X-Amz-Server-Side-Encryption-Customer-Key-MD5", "m7AXuOLSaEQc1369IHCZGw==")
        // xhr.setRequestHeader("X-Amz-Server-Side-Encryption-Customer-Algorithm", "AES256")
        // xhr.setRequestHeader("X-Amz-Server-Side-Encryption-Customer-Key", "5svVq6aMjTLMBTD0yaIT9u735QnpHteabx6nFZUXvac=")
        xhr.onreadystatechange = () => {
          if (xhr.readyState === xhr.DONE) {
            if (xhr.status === 200) {
              console.log(URL.createObjectURL(xhr.response), 'ffff')
              this.previewUrl = URL.createObjectURL(xhr.response)
              console.log('预览地址', URL.createObjectURL(xhr.response))
              iframe.src = './static/pdfjs/web/viewer.html?file=' + URL.createObjectURL(xhr.response);

            }
          }
        };
        xhr.send();
      },
      updateVisibleClose() {
        this.updateVisible = false;
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val;
        this.pageNo = 1;
        this.refreshList();
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageNo = val;
        this.refreshList();
      },
      // 修改
      edit(row) {
        if (row.folderType === 0) {
          //文件
          this.updateForm = row;
          console.log(this.updateForm, row);
          this.updateVisible = true;
        } else {
          //1视频
          this.$router.push({ path: '/knowledgeManage/originalFile/UpdateVideoForm', query: { id: row.id } })
        }

      },
      // 编辑视频

      editVideo(row) {
        this.$router.push({
          path: '/knowledgeManage/originalFile/UploadVideoForm',
          query: {
            fileType: row.fileType,
            profession: row.profession,
            id: row.id,
            from: 'editVideo'
          },
        });
      },

      // 查看
      view(id) { },
      // 删除
      del(row) {
        this.$confirm(
          `确定删除${row ? "[" + row.fileName + "]" : "选中项"}吗?`,
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).then(() => {
          this.$http({
            url: "/knowledgeFile/file/delete",
            method: "post",
            data: { id: row.id },
          }).then(({ data }) => {
            this.$message.success(data.msg);
            this.refreshList();
          });
        });
      },
      handleFile(row) {
        this.$confirm(
          `确定提交${row ? "[" + row.fileName + "]" : "选中项"}吗?`,
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).then(() => {
          this.$http({
            url: "/knowledgeFile/file/submit",
            method: "post",
            data: { id: row.id },
          }).then(({ data }) => {
            this.$message.success(data.msg);
            this.refreshList();
          });
        });
      },
      withdraw(row) {
        this.$confirm(
          `确定撤回${row ? "[" + row.fileName + "]" : "选中项"}吗?`,
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).then(() => {
          this.$http({
            url: "/knowledgeFile/file/withdraw",
            method: "post",
            data: { id: row.id },
          }).then(({ data }) => {
            this.$message.success(data.msg);
            this.refreshList();
          });
        });
      },
      // 审核任务驳回
      rejectReview(id) {
        this.elementsVisible = true;
        this.elementsVisibleId = id;
      },
      passReview(row) {
        this.$confirm(
          `确定通过${row ? "[" + row.fileName + "]" : "选中项"}吗?`,
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).then(() => {
          this.$http({
            url: "/knowledgeFile/review/pass",
            method: "post",
            data: { id: row.id },
          }).then(({ data }) => {
            this.$message.success(data.msg);
            this.refreshList();
          });
        });
      },
      // 批准驳回
      rejectApprove(id) {
        this.elementsVisible = true;
        this.elementsVisibleId = id;
      },
      passApprove(row) {
        this.$confirm(
          `确定通过${row ? "[" + row.fileName + "]" : "选中项"}吗?`,
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).then(() => {
          this.$http({
            url: "/knowledgeFile/approve/pass",
            method: "post",
            data: { id: row.id },
          }).then(({ data }) => {
            this.$message.success(data.msg);
            this.refreshList();
          });
        });
      },
      resetSearch() {
        this.searchForm.fileName = ''
        this.searchForm.fileType = ''
        this.searchForm.profession = ''
        this.searchForm.startTime = ''
        this.searchForm.endTime = ''
        this.time = []
        this.refreshList();
      },
      handleUpload() {
        this.dialogVisible = true;
      },
      // 上传文件过滤
      beforeUpload(file) {
        // let typeStr = 'doc,docx,ppt,pptx,ppts,xls,xlsx,wps,et,dps,pdf,xps,txt,ptx,win,rar,zip,7z,bmp,jpg,png,gif,jpeg,mp4,avi,hlv,wmv,3gp,rmvb,flv,mp3,wma,midi,ofd,ceb,sep,html,mhtml';
        // console.log(file, '--------------file');
        // let typeList = typeStr.split(',');
        // let nums = typeList.length;
        // var result = false;
        // for (let i = 0; i < nums; i++) {
        //     var index = file.name.indexOf('.' + typeList[i]);
        //     if (index !== -1) {
        //         result = true;
        //         break;
        //     }
        // }
        const isLt2M = file.size / 1024 / 1024 < 100;
        if (!result) {
          this.$message({
            showClose: true,
            message: "您选择的文件格式不在系统支持的范围内，请重新选择！",
            type: "warning",
          });
          return false;
        }
        if (!isLt2M) {
          this.$message.error(
            "系统仅允许单个附件大小在100M以内的文件进行上传，本次上传有文件超出限制，请重新选择！"
          );
          return false;
        }
        return isLt2M
      },
      //pdf、视频预览
      changeLike() {
        let url = this.collectLikeForm.like==1 ? '/knowledgeCollect/delete' : '/knowledgeCollect/add'
        this.$http({
          url: url,
          method: 'post',
          data: {
            collectType: 1,
            knowledgeFileId: this.detailRow.id
          }
        }).then(({data}) => {
          if (data.code == 200) {
            this.$message.success(this.collectLikeForm.like==1?'取消点赞成功':'点赞成功')
            this.collectLikeForm.like ==  1 ? this.collectLikeForm.likeNumber-- : this.collectLikeForm.likeNumber++
            this.collectLikeForm.like == 1 ? this.collectLikeForm.like = 0 : this.collectLikeForm.like = 1
          }
        })
      },
      changeCollect() {
        let url = this.collectLikeForm.collect==1 ? '/knowledgeCollect/delete' : '/knowledgeCollect/add'
        this.$http({
          url: url,
          method: 'post',
          data: {
            collectType: 2,
            knowledgeFileId: this.detailRow.id
          }
        }).then(({data}) => {
          if (data.code == 200) {
            this.$message.success(this.collectLikeForm.collect==1?'取消收藏成功':'收藏成功')
            this.collectLikeForm.collect ==  1 ? this.collectLikeForm.collectNumber-- : this.collectLikeForm.collectNumber++
            this.collectLikeForm.collect == 1 ? this.collectLikeForm.collect = 0 : this.collectLikeForm.collect = 1
          }
        })
      },
      changeTime(val) {
        this.searchForm.startTime = val ? val[0] : "";
        this.searchForm.endTime = val ? val[1] : "";
      },
      handleExportPermission() {
      this.$utils.download({
        url: "/user/exportKnowledgeDataPermission",
        method: "get",
        params: {
          ...this.searchForm,
        },
        defaultFileName: `数据权限（文件）_${new Date().getTime()}.zip`,
      });
    },
    }
  }
  </script>

  <style scoped lang="scss">
  #contianer {
    width: 98%;
    min-height: 96%;
    background: white;
    border-radius: 10px;
    padding: 20px 20px 50px;
    margin: 1%;

    .t_tab {
      margin-bottom: 20px;
      padding-top: 10px;

      .tab_item {
        display: inline-block;
        font-size: 20px;
        padding: 0 20px 8px;
        margin-right: 20px;
        border-bottom: 2px solid #fff;
        cursor: pointer;
        transition: all 0.3s ease 0s;

        &:hover {
          opacity: 0.65;
        }
      }

      .tab_item_active {
        font-weight: bold;
        color: #0081f5;
        border-bottom: 2px solid #0081f5;
      }
    }
    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #D8D8D8;

      .header_button {
        width: 100%;
        height: 64px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0 24px;
        font-family: Source Han Sans;
        font-size: 18px;
        font-weight: normal;
        img {
          width: 20px;
          max-height: 20px;
          margin: 0 8px 0 16px;
          cursor: pointer;
        }
      }
    }
  }


  .video_model {
    // width: 260px;
    // height: 190px;
    width: 100%;
    // height: 85vh !important;
    // background: red;
    // border: 1px solid #e6e6e6;
    border-radius: 5px;
    margin-bottom: 20px;

    #video {
      flex: auto;
      height: 85vh !important;
    }

    .video_info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 10px;
      line-height: 22px;

      h3 {
        flex: 1;
        padding: 0;
        margin: 0;
        font-weight: 550;
        font-size: 18x;
      }

      .author,
      .blurb {
        font-size: 14px;
      }
    }
  }

  .table .el-button--small {
    padding: 0 10px;
  }

  .el-table th.el-table__cell>.cell {
    //white-space: nowrap;
  }
  ::v-deep .previewIframe{
    .el-dialog__body{
      height: calc(100% - 30px);
    }
  }
  </style>
